<template>
    <div class="app-container">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel">
                    <div style="height: 400px; overflow-x: hidden;" class="row-fluid fontawesome-icon-list" id="icon-list">
                        <div v-for="(item, index) in iconList" v-show="index == 'webApplicationIcons'" class="icon-con">
                            <h2 class="page-header">{{index}}</h2>
                            <div class="row the-icons">
                                <div class="col-sm-3 inconEl" v-for="el in item" @click="active(el)">
                                    <i :class="el"></i>{{el}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <ul class="carousel-indicators icon-indicators" id="icon-active">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>                
                    </ul> -->
                </div>    
            </div>
        </div>
    </div>
</template>
<style scoped>
    .the-icons > div {
        cursor: pointer;
    }
    .my-active{
        background: #ec6459;
        color: #fff;
    }
    .icon-indicators {
        background: #ccc;
        margin-top: 10.2rem;
    }
</style>
<script>
    export default {
        name: 'myIconList',
        data: function () {
            return {
                iconList:require('@/assets/data/iconList.json'),
                icon:''
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.init();
            });
        },
        methods: {
            init: function(){
                console.log(this.iconList,'iconList=')
                let $inconEl = $('#icon-list .inconEl');
                $inconEl.on('click',function(){
                    $inconEl.removeClass('my-active');
                    $(this).addClass('my-active');
                });
                let $liList = $('#icon-active li');
                let iconCon = $('#icon-list .icon-con');
                $liList.each(function(i){
                    let index = i;
                    let _$this = $(this);
                    _$this.on('click',function(){
                        iconCon.hide();
                        iconCon.eq(index).show();
                        $liList.removeClass('active');
                        $(this).addClass('active');
                    });
                });
            },
            active: function(el){
                this.icon = el;
            },
            getIcon(){
                return this.icon;
            },
            execute: function () {
                this.$emit('actIcon',this.icon);
            }
        }
    }
</script>
